<h1>属性指令</h1>

<!-- <p [itany]="str"></p> -->
<p [id]= " str ">>属性指令-绑定HTML标签属性</p>
<p id=" {{str}} ">插值表达式-绑定HTML标签属性</p>

<p id=" {{arr}} ">插值表达式-绑定HTML标签属性</p>
<p [id]=" arr ">属性指令-绑定HTML标签属性</p>


<p id=" {{ user }} ">插值表达式-绑定HTML标签属性</p>
<p [id]=" user ">属性指令-绑定HTML标签属性</p>

<!--
     当属性向浏览器展示时，浏览器会按照属性要求的类型进行转换，
    但是插值表达式在这之前也会进行一次按照插值表达式规则的转换
 -->
<p id=" {{ arg1 }} ">插值表达式-绑定HTML标签属性</p>
<p [id]=" arg1 ">属性指令-绑定HTML标签属性</p>
<p id=" {{ arg2 }} ">插值表达式-绑定HTML标签属性</p>
<p [id]=" arg2 ">属性指令-绑定HTML标签属性</p>

<p> flag:{{flag}} </p>
<input type="text" disabled>
<!-- false被插值表达式转成了字符串 所以浏览器判断为真 -->
<input type="text" disabled = " {{ flag }} ">
<input type="text" [disabled] = "">
<hr>

<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="">
<img src=" {{ null }} " alt="">
<img [src]=" null " alt="">

<p attr.itany = " {{str}} ">绑定自定义属性 itany-插值表达式</p>
<p [attr.itany]=" str ">绑定自定义属性 itany-属性指令</p>

<hr>
<p [class]=" 'fc' ">绑定class</p>
<p [style]=" 'color:red;' ">绑定style</p>

<p class=" {{ 'fc fs border bc' }} ">绑定class-参考</p>
<!-- <p class=" {{ ClassArr }} ">绑定属性</p> -->
<p [ngClass]= " ClassArr " > ngClass-属性指令-Arr </p>
<p [ngClass]= " classObj " > ngClass-属性指令-obj </p>
<input type="button" value="切换颜色" (click)=" classObj.fc= !classObj.fc">
<p [ngStyle]=" styleObj ">ngStyle指令</p>
<input type="button" value="添加样式" (click)=" styleObj.border = '1px solid black' ">
